<template>
    <div class="article-records">
        <el-drawer v-model="recordsDrawer" direction="rtl">
            <template #header>
                <div style="display: flex;gap: 10px;align-items: center;">
                    <h3>编排记录</h3> <el-button style="margin-top: 2px;" type="primary" size="small"
                        @click="handleRefresh">
                        刷新
                    </el-button>
                </div>
            </template>
            <template #default>
                <div>
                    <el-collapse>
                        <el-collapse-item>
                            <template #title>
                                <div class="title-content">
                                    <div class="title-info">
                                        <div class="info-row">
                                            <span class="info-item">
                                                <span class="label">文章分类:</span>
                                                <span class="value">技术文章</span>
                                            </span>
                                            <span class="info-item">
                                                <span class="label">文章数量:</span>
                                                <span class="value">10</span>
                                            </span>
                                        </div>
                                        <div class="info-row">
                                            <span class="info-item">
                                                <span class="label">网站:</span>
                                                <span class="value">example.com</span>
                                            </span>
                                            <span class="info-item">
                                                <span class="label">地区:</span>
                                                <span class="value">中国</span>
                                            </span>
                                            <span class="info-item">
                                                <span class="label">语言:</span>
                                                <span class="value">中文</span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="title-actions">
                                        <el-button type="primary" size="small" @click.stop="handleEdit">
                                            编辑
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                            <div class="collapse-content">
                                <div class="content-header">
                                    <h4 class="content-title">标题</h4>

                                </div>

                                <div class="content-body">
                                    <div class="article-outline">
                                        <h5>文章大纲</h5>
                                        <ol class="outline-list">
                                            <li>1</li>
                                            <li>2</li>
                                        </ol>
                                    </div>

                                    <div class="article-status">
                                        <div class="status-item">
                                            <span class="label">开始时间:</span>
                                            <span class="value">2025/09/25 18</span>
                                        </div>
                                        <div class="status-item">
                                            <span class="label">文章状态:</span>
                                            <span class="value status-writing">写作中</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
defineComponent({ name: 'ArticleRecords' })
const recordsDrawer = ref(false)
const showRecords = () => {
    recordsDrawer.value = true
}
const handleEdit = () => {
    console.log('编辑按钮被点击')
    // 这里可以添加编辑逻辑
}

const handleRefresh = () => {
    console.log('刷新按钮被点击')
    // 这里可以添加刷新逻辑
}

onMounted(() => {
    console.log('ArticleRecords 组件挂载')
})
defineExpose({
    showRecords
})
</script>

<style scoped>
.title-content {
    width: 100%;
    padding: 16px 0;
    position: relative;
}

.title-info {
    display: flex;
    flex-direction: column;
}

.title-actions {
    position: absolute;
    top: 25px;
    right: 0;
    display: flex;
    align-items: center;
    height: 20px;
    transform: translateY(0);
}

.info-row {
    display: flex;
    gap: 24px;
    align-items: center;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.label {
    font-weight: 500;
    color: #606266;
    font-size: 14px;
}

.value {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
}

/* 折叠面板内容样式 */
.collapse-content {
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
    background: white;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.content-title {
    margin: 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
}

.content-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.article-outline {
    flex: 1;
}

.article-outline h5 {
    margin: 0 0 12px 0;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
}

.outline-list {
    margin: 0;
    padding-left: 20px;
}

.outline-list li {
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.article-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-item .label {
    font-size: 14px;
    color: #909399;
}

.status-item .value {
    font-size: 14px;
    color: #303133;
}

.status-writing {
    color: #e6a23c !important;
    font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .info-item {
        gap: 4px;
    }

    .label,
    .value {
        font-size: 13px;
    }

    .content-body {
        flex-direction: column;
        gap: 16px;
    }

    .article-status {
        min-width: auto;
    }
}
</style>